<template>
  <div>
    <h1>成绩管理</h1>
    <div v-for="teacherCourse in courseStore.teacherCourses" :key="teacherCourse.id">
      <div class="course-header">
        <h2>{{ teacherCourse.course.courseName }} 课程成绩</h2>
        <el-button type="primary" @click="toggleEditMode(teacherCourse)">
          {{ teacherCourse.isEditingMode? '收起编辑' : '展开编辑' }}
        </el-button>
      </div>
      <div v-if="teacherCourse.isEditingMode">
        <el-table :data="teacherCourse.students" stripe>
          <el-table-column prop="studentNumber" label="学生 ID"></el-table-column>
          <el-table-column prop="name" label="学生姓名"></el-table-column>
          <el-table-column label="成绩">
            <template #default="scope">
              <template v-if="!scope.row.isEditing">
                <span>{{ scope.row.score === null? '未登记成绩' : scope.row.score }}</span>
              </template>
              <template v-else>
                <el-input v-model.number="scope.row.score" />
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                :type="scope.row.isEditing? 'primary' : 'info'"
                @click="handleScoreEdit(scope.row, teacherCourse.id)"
              >
                {{ scope.row.isEditing? '确认登记' : '编辑成绩' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useCourseStore } from '../stores/course';
import { useGradeStore } from '../stores/grade';
import { ElButton, ElTable, ElTableColumn } from 'element-plus';
import type {  TeacherCourse } from '@/types/course';
import type { Student } from '@/types/student';
import type { Grade } from '@/types/grade';

const courseStore = useCourseStore();
const gradeStore = useGradeStore();

// 初始化每个课程的编辑状态，默认收起
courseStore.teacherCourses.forEach(course => {
  if (!course.isEditingMode) {
    course.isEditingMode = false;
  }
  course.students.forEach((student: Student) => {
    student.isEditing = false;
  });
});

const toggleEditMode = (course: TeacherCourse) => {
  course.isEditingMode =!course.isEditingMode;
};

const handleScoreEdit = async (student: Student, courseId: number) => {
  
  if (student.isEditing) {
    const gradeData:Grade = {
      gradeId: student.gradeId as number,
      studentNumber: student.studentNumber,
      courseScheduleId:courseId,
      score: student.score as number
    };  
    await gradeStore.saveOrUpdateGrade(gradeData);
    student.isEditing = false;
  
  } else {
    student.isEditing = true;
  }
};

onMounted(async () => {
  await courseStore.fetchTeacherCourses();
  
});
</script>

<style scoped>
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}
</style>